<template>
  <div class="container">
    <el-form>
    <el-row style="margin-top:20px;">
<!--      <el-col :sapn="4">-->
<!--        <el-date-picker-->
<!--            v-model="time"-->
<!--            type="daterange"-->
<!--            value-format="yyyy-MM-dd"-->
<!--            start-placeholder="开始日期"-->
<!--            end-placeholder="结束日期"-->
<!--        >-->
<!--        </el-date-picker>-->
<!--      </el-col>-->
      <el-col :span="6">
        <el-date-picker
            v-model="time"
            type="daterange"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-col>
      <el-col :span="5">
        <el-form-item label="物料类型：" prop="userName">
          <el-select v-model="name"  filterable placeholder="请选择" style="width: 200px;">
            <el-option label="配方颗粒" value="配方颗粒"></el-option>
            <el-option label="配方颗粒(颗粒)" value="配方颗粒(颗粒)"></el-option>
            <el-option label="配方颗粒(浸膏粉)" value="配方颗粒(浸膏粉)"></el-option>
            <el-option label="提取饮片" value="提取饮片"></el-option>
            <el-option label="中药材" value="中药材"></el-option>
            <el-option label="辅料" value="辅料"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    <el-col :span="5">
      <el-form-item label="标准类型：" prop="userName">
        <el-select v-model="standard"  filterable placeholder="请选择" style="width: 200px;">
          <el-option label="国标" value="国标">国标</el-option>
          <el-option label="省标" value="省标">省标</el-option>
          <el-option label="省标-北京" value="省标-北京">省标-北京</el-option>
          <el-option label="省标-上海" value="省标-上海">省标-上海</el-option>
        </el-select>
      </el-form-item>
    </el-col>
      <el-col :span="5">
        <el-form-item label="产品大类：" prop="userName">
          <el-select v-model="inventoryType"  filterable placeholder="请选择" style="width: 200px;">
            <el-option label="c60" value="c60"></el-option>
            <el-option label="c70" value="c70"></el-option>
            <el-option label="c80" value="c80"></el-option>
            <el-option label="c90" value="c90"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-input placeholder="请输入品种" v-model.trim="breedName"  style="width: auto;margin-left: 20px">
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button  @click="reset">重置</el-button>
        <el-button type="primary"  @click="getdata">查询</el-button>
      </el-col>
      <el-col :span="2" style="float: right" >
        <el-button type="primary"  @click="exportlist">导出列表</el-button>
<!--        <el-button type="primary"  @click="getdata">查询</el-button>-->
      </el-col>
    </el-row>
    </el-form>
    <el-table
        :data="tableData"
        border
        ref="multipleTable"
        header-cell-class-name="table-header"
        style="margin-top:20px;"
    >
      <el-table-column prop="type" sortable label="物料类型"></el-table-column>
      <el-table-column prop="breedName" sortable label="物料名称"></el-table-column>
      <el-table-column prop="time" sortable label="入库时间"></el-table-column>
      <el-table-column prop="batch" sortable label="生产/入库批次"></el-table-column>
      <el-table-column prop="standard" sortable label="标准类型"></el-table-column>
      <el-table-column prop="inventoryType" sortable label="产品大类"></el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button
              type="text"
              style="color: #409EFF;"
              @click="handleEdit(scope.$index, scope.row)"
          >查看</el-button>
          <el-button
              type="text"
              style="color: #409EFF;"
              v-if="name1 == '1'"
              @click="handlelink(scope.$index, scope.row)"
          >追溯链条</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize" :current-page.sync="currentPage"  @current-change="handleCurrentChange" :total="total" style="margin-top:20px"></el-pagination>

  </div>
</template>

<script>
import {homelinklist} from '@/request/api'
import axios from "axios";
// import {CodeToText} from 'element-china-area-data'
export default {
  data() {
    return {
      time:[],
      searchName: '',
      tableData: [],
      currentPage:1,
      pagesize:10,
      total:0,
      name:'配方颗粒',
      standard:"国标",
      action:'',
      breedName:'',
      inventoryType:'',
      standard1:'',
      name1:1
    };
  },
  created(){

  },
  mounted(){
    this.cid = this.$route.query.cid
    this.init()
  },
  methods: {
    exportlist(){
      let data = {
        type:this.name,
        standard:this.standard1,
        startTime:this.time[0],
        endTime:this.time[1],
        companyId:this.cid,
        breedName:this.breedName,
        inventoryType:this.inventoryType
      }
      axios({
        method: 'POST',
        url: '/homeNew/export',
        data:data,
        responseType: 'blob'
      }).then(res=>{
        //  console.log(res)
        // let blob = new Blob([res.data], {type: "application/vnd.ms-excel"});
        // let url = window.URL.createObjectURL(blob);
        // window.location.href = url;
        this.downloadFile(res, '数据.xls')

      }).catch(err=>{
        // console.log(err)
      })
    },
    downloadFile(res, fileName) {
      let blob = new Blob([res.data]);
      if (!fileName) {
        fileName = res.headers['content-disposition'].split('filename=').pop();
      }
      if ('msSaveOrOpenBlob' in navigator) {
        window.navigator.msSaveOrOpenBlob(blob, fileName);
      } else {
        const elink = document.createElement('a');
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href);
        document.body.removeChild(elink);
      }
    },
    reset(){
      this.breedName = ""
      this.name="配方颗粒"
      this.standard = "国标"
      this.inventoryType = ""
      this.time = []
      this.name1 = 1
      this.currentPage = 1
      this.init()
    },
    getdata(){
      if(this.name == "配方颗粒"){
        this.name1 = 1
      }else{
        this.name1 =2
      }
      this.currentPage = 1
      this.init()

    },
    handleCurrentChange(val){
      this.currentPage = val
      this.init()
    },
    init(){
      if(this.standard == "国标"){
        this.standard1 = 1
      }else if(this.standard=="省标"){
        this.standard1 = 2
      }else if(this.standard=="省标-北京"){
        this.standard1 = 3
      }else if(this.standard=="省标-上海"){
        this.standard1 = 4
      }
      let data = {
        page:this.currentPage,
        type:this.name,
        standard:this.standard1,
        startTime:this.time[0],
        endTime:this.time[1],
        pageSize:10,
        companyId:this.cid,
        breedName:this.breedName,
        inventoryType:this.inventoryType
      }
      homelinklist(data).then((res)=>{
        this.tableData = res.data.content
        for (let i = 0; i < this.tableData.length; i++) {
          if(this.tableData[i].standard == "1"){
            this.tableData[i].standard = "国标"
          }else if(this.tableData[i].standard == "2"){
            this.tablelist[i].standard = "省标"
          }else if(this.tableData[i].standard == "3"){
            this.tableData[i].standard = "省标-上海"
          }else if(this.tableData[i].standard == "4"){
            this.tableData[i].standard = "省标-北京"
          }
        }
        this.total = res.data.totalElements
      })
    },
    // //搜索
    // handleSearch(){
    //   this.currentPage = 1
    //   this.init()
    // },
    //跳转编辑页面
    handleEdit(index,row){
      if(row.type == "配方颗粒"){
        this.$router.push({
          path: '/packing/viewPacking',
          query: { id: row.id }
        });
      }
      if(row.type == "配方颗粒(颗粒)"){
        this.$router.push({
          path: '/production/viewProduction',
          query: { id: row.id }
        });
      }
      if(row.type == "配方颗粒(浸膏粉)"){
        this.$router.push({
          path: '/production/viewProduction',
          query: { id: row.id }
        });
      }
      if(row.type == "提取饮片"){
        this.$router.push({
          path: '/production/viewProduction',
          query: { id: row.id }
        });
      }
      if(row.type == "中药材"){
        this.$router.push({
          path: '/materialCheck/viewMaterialCheck',
          query: { id: row.id }
        });
      }
      if(row.type == "辅料"){
        this.$router.push({
          path: '/materialCheck/viewMaterialCheck',
          query: { id: row.id }
        });
      }

    },
    handlelink(index,row){
      this.$router.push({
        path: '/linkdetail',
        query: { id: row.id }
      });
    },
  }
}
</script>

<style scoped lang="less">

/deep/.upload-daoru{
  background: #eee;
  .el-upload{
    border: none;
    width: auto;
    height: auto;
    border-radius: 0;
    float: right;
    margin-right: 10px
  }
}
/* .el-row{ margin-bottom: 20px;} */
.el-pagination{
  text-align: center;
}
/* .el-select .el-input {
width: 130px;
} */
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.el-input--small .el-input__inner{
  border-radius: 5px 0 0 5px !important;
  /* border-right: none; */
}
.el-col{
  margin-bottom:0;
}
</style>
